.index {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;

    .index_main {
        width: 1200px;

    }

    //轮播图
    .shuffling {
        width: 100%;
        height: 500px;
    }

    //悬浮
    .suspension {
        position: fixed;
        right: 0;
        top: 190px;
        width: 120px;
        height: 300px;
        background-color: #dcdcdc;

        .suspension_box {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;

            .suspension_top {
                display: flex;
                flex-direction: column;
                align-items: center;

                p {
                    margin-bottom: 20px;
                    font-size: 20px;
                    color: #000;
                }

                span {
                    font-size: 16px;
                    color: #333;
                }
            }

            .suspension_bottom {
                display: flex;
                align-items: center;
                flex-direction: column;
                box-sizing: border-box;

                p {
                    font-size: 20px;
                    margin: 20px 0;
                    box-sizing: border-box;
                }

                .suspension_bottom_img {
                    width: 100px;
                    height: 100px;
                    border: 1px solid red;
                    margin-bottom: 10px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                span {
                    display: inline-block;
                    width: 50px;
                    height: 40px;
                }
            }
        }
    }

    // list
    .list {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        .list_box {
            width: 100%;
            display: flex;
            flex-direction: column;

            .list_top {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .list_top_left {
                    display: flex;
                    align-items: center;


                    .list_top_logo {
                        width: 40px;
                        height: 40px;
                        margin-right: 10px;


                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .list_top_title {}
                }

                .list_top_right {
                    display: flex;
                    align-items: center;
                    height: 100%;

                    .list_top_rightFont {}

                    .list_top_rightImg {
                        width: 15px;
                        height: 15px;


                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }


                }
            }

            .list_itemBox {
                display: grid;
                overflow: hidden;
                height: 522px;
                margin-top: 10px;
                grid-template-columns: repeat(6, 200px);
                grid-template-rows: repeat(2, 260px);

                .list_item2 {
                    grid-column-start: 2;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 3;
                    font-size: 30px !important;
                }

                .list_item {
                    border: 1px solid #000;

                    .list_item_img {
                        width: 100%;
                        height: 75%;
                        background-color: #dcdcdc;
                        overflow: hidden;

                        :hover {
                            transition: all 1s;
                            transform: scale(1.4);
                        }

                        img {
                            width: 100%;
                            height: 100%;


                        }

                    }
                }

                .list_item_fontBox {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 5px;
                    display: flex;
                    flex-direction: column;

                    .list_item_title {
                        width: 100%;
                        height: 40%;
                        display: -webkit-box;
                        overflow: hidden;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                    }

                    .list_item_price {
                        color: red;
                        // font-size: 26px;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}